﻿<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../../images/favicon.ico">

  <title>ZBT 后台管理 - 仪表板</title>


  <!-- 文件导入，共性抽取 -->
  <script src="../../js/kimImport.js"></script>
  <script src="../../../assets/vendor_components/jquery/dist/jquery.js"></script>
  <script src="../../js/template-web.js"></script>



  <!-- Bootstrap 4.0-->
  <link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.css">

  <!-- Bootstrap extend-->
  <link rel="stylesheet" href="../../css/bootstrap-extend.css">

  <!-- Data Table-->
  <link rel="stylesheet" type="text/css" href="../../../assets/vendor_components/datatable/datatables.min.css" />

  <!-- theme style -->
  <link rel="stylesheet" href="../../css/master_style.css">

  <!-- ZBT 后台管理 skins -->
  <link rel="stylesheet" href="../../css/skins/_all-skins.css">

  <!-- Vector CSS -->
  <link href="../../../assets/vendor_components/jvectormap/lib2/jquery-jvectormap-2.0.2.css" rel="stylesheet" />

  <!-- Morris charts -->
  <link rel="stylesheet" href="../../../assets/vendor_components/morris.js/morris.css">


  <link rel="stylesheet" href="../../css/utils.css">


  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>


<style>
  #baoguan1 tr,
  #baoguan1 td {
    border: 2px solid #ebebeb !important;
    border-right: 2px solid #ebebeb !important;
  }

  table p {
    margin-top: 0 !important;
    margin-bottom: 0rem !important;
  }
</style>

<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
  <aside class="main-sidebar"></aside>

  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        仪表板
        <!-- <small>控制面板</small> -->
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="breadcrumb-item active">仪表版</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="row">
        <div class="col-xl-3 col-md-6 col-12">
          <div class="box box-body">
            <h6 class="text-uppercase">进口金额</h6>
            <div class="flexbox mt-2">
              <span class="fa  fa-dollar  text-danger font-size-40"></span>
              <span class=" font-size-30">553</span>
            </div>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          <div class="box box-body">
            <h6 class="text-uppercase">订单数量</h6>
            <div class="flexbox mt-2">
              <span class="fa fa-area-chart text-info font-size-40"></span>
              <span class=" font-size-30">4105</span>
            </div>
          </div>
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-xl-3 col-md-6 col-12">
          <div class="box box-body">
            <h6 class="text-uppercase">税款</h6>
            <div class="flexbox mt-2">
              <span class="fa  fa-ils font-size-40 text-primary"></span>
              <span class=" font-size-30">1250</span>
            </div>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          <div class="box box-body">
            <h6 class="text-uppercase">货款</h6>
            <div class="flexbox mt-2">
              <span class="fa fa-dollar font-size-40 text-success"></span>
              <span class=" font-size-30">2150</span>
            </div>
          </div>
        </div>
        <!-- /.col -->
      </div>

      <div class="row">

        <div class="col-12 col-lg-6">
          <!-- AREA CHART -->
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">进口订单月统计</h4>
              <ul class="box-controls pull-right">
                <li><a class="box-btn-close" href="#"></a></li>
                <li><a class="box-btn-slide" href="#"></a></li>
                <li><a class="box-btn-fullscreen" href="#"></a></li>
              </ul>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="chart_2" height="120"></canvas>
              </div>
            </div>
          </div>
          <!-- /.box -->
        </div>

        <div class="col-12 col-lg-6">
          <!-- AREA CHART -->
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">进口数量走势图</h4>
              <ul class="box-controls pull-right">
                <li><a class="box-btn-close" href="#"></a></li>
                <li><a class="box-btn-slide" href="#"></a></li>
                <li><a class="box-btn-fullscreen" href="#"></a></li>
              </ul>
            </div>
            <div class="box-body">
              <div class="">
                <canvas id="satatistics1" height="120" style="position: absolute;"></canvas>
                <canvas id="satatistics2" height="120"></canvas>
              </div>
            </div>
          </div>
        </div>


        <!-- <div class="col-12 col-lg-6">
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">收入统计</h4>
              <ul class="box-controls pull-right">
                <li><a class="box-btn-close" href="#"></a></li>
                <li><a class="box-btn-slide" href="#"></a></li>
                <li><a class="box-btn-fullscreen" href="#"></a></li>
              </ul>
            </div>
            <div class="box-body">
              <div class="chart-responsive">
                <div class="chart" id="bar-chart" style="height: 300px;"></div>
              </div>
            </div>
          </div>
        </div> -->

        <!-- <div class="col-12 col-lg-6">
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">进口与进口数量对比</h4>

              <ul class="box-controls pull-right">
                <li><a class="box-btn-close" href="#"></a></li>
                <li><a class="box-btn-slide" href="#"></a></li>
                <li><a class="box-btn-fullscreen" href="#"></a></li>
              </ul>
            </div>
            <div class="box-body chart-responsive">
              <div class="chart" id="revenue-chart" style="height: 300px;"></div>
            </div>
          </div>

        </div> -->




        <div class="col-12 col-lg-6 col-xl-4">
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">各国订单采购情况</h4>
            </div>
            <div class="box-body px-0 pt-0 pb-30">
              <div class="media-list media-list-hover media-list-divided">
                <a class="media media-single" href="#">
                  <span class="title font-size-16 text-fade">美国</span>
                  <span class="badge badge-lg badge-secondary">3259</span>
                </a>

                <a class="media media-single" href="#">
                  <span class="title font-size-16 text-fade">日本</span>
                  <span class="badge badge-lg badge-primary">12458</span>
                </a>

                <a class="media media-single" href="#">
                  <span class="title font-size-16 text-fade">印度</span>
                  <span class="badge badge-lg badge-info">9658</span>
                </a>

                <a class="media media-single" href="#">
                  <span class="title font-size-16 text-fade">朝鲜</span>
                  <span class="badge badge-lg badge-success">1524</span>
                </a>

                <a class="media media-single" href="#">
                  <span class="title font-size-16 text-fade">英国</span>
                  <span class="badge badge-lg badge-danger">41582</span>
                </a>

                <a class="media media-single" href="#">
                  <span class="title font-size-16 text-fade">日尼西亚</span>
                  <span class="badge badge-lg badge-warning">1548</span>
                </a>

              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-12">
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">世界地图</h4>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div id="world-map-markers" style="height: 302px"></div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>


        <div class="col-xl-4 col-12">
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">USA</h4>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div id="usa" style="height: 302px"></div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>


        <!-- <div class="col-12 col-xl-4">
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">Latest Job Opning</h4>
            </div>
            <div class="box-body p-0">
              <div class="media-list media-list-hover">

                <a class="media media-single" href="#">
                  <span class="avatar avatar-lg bg-info rounded-circle"><img src="../../../images/logo/logo-5.jpg"
                      alt=""></span>
                  <div class="media-body">
                    <h5 class="text-fade">Developre</h5>
                    <span class="text-fade"><i class="fa fa-map-marker"></i> Miami</span>
                  </div>
                  <p class="media-right text-right text-fade">Last Date<br> 10th May 2018</p>
                </a>

                <a class="media media-single" href="#">
                  <span class="avatar avatar-lg bg-info rounded-circle"><img src="../../../images/logo/logo-4.jpg"
                      alt=""></span>
                  <div class="media-body">
                    <h5 class="text-fade">Designer</h5>
                    <span class="text-fade"><i class="fa fa-map-marker"></i> Brazil</span>
                  </div>
                  <p class="media-right text-right text-fade">Last Date<br> 18th Oct 2018</p>
                </a>

                <a class="media media-single" href="#">
                  <span class="avatar avatar-lg bg-info rounded-circle"><img src="../../../images/logo/logo-3.jpg"
                      alt=""></span>
                  <div class="media-body">
                    <h5 class="text-fade">Managner</h5>
                    <span class="text-fade"><i class="fa fa-map-marker"></i> London</span>
                  </div>
                  <p class="media-right text-right text-fade">Last Date<br> 10th Jan 2019</p>
                </a>

                <a class="media media-single" href="#">
                  <span class="avatar avatar-lg bg-info rounded-circle"><img src="../../../images/logo/logo-2.jpg"
                      alt=""></span>
                  <div class="media-body">
                    <h5 class="text-fade">PHP</h5>
                    <span class="text-fade"><i class="fa fa-map-marker"></i> Abud habi</span>
                  </div>
                  <p class="media-right text-right text-fade">Last Date<br> 15th Nav 2018</p>
                </a>

                <a class="media media-single" href="#">
                  <span class="avatar avatar-lg bg-info rounded-circle"><img src="../../../images/logo/logo-1.jpg"
                      alt=""></span>
                  <div class="media-body">
                    <h5 class="text-fade">Developre</h5>
                    <span class="text-fade"><i class="fa fa-map-marker"></i> New York</span>
                  </div>
                  <p class="media-right text-right text-fade">Last Date<br> 20th Oct 2018</p>
                </a>

              </div>
            </div>
          </div>
        </div>
        

        <div class="col-12 col-lg-6 col-xl-4">
          <div class="box">
            <div class="box-header with-border">
              <h4 class="box-title">Top Applicants Filds</h4>
              <div class="box-tools pull-right">
                <ul class="card-controls">
                  <li class="dropdown">
                    <a data-toggle="dropdown" href="#"><i class="ion-android-more-vertical"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item active" href="#">Today</a>
                      <a class="dropdown-item" href="#">Yesterday</a>
                      <a class="dropdown-item" href="#">Last week</a>
                      <a class="dropdown-item" href="#">Last month</a>
                    </div>
                  </li>
                  <li><a href="#" class="link card-btn-reload" data-toggle="tooltip" title=""
                      data-original-title="Refresh"><i class="fa fa-circle-thin"></i></a></li>
                </ul>
              </div>
            </div>

            <div class="box-body">
              <div class="text-center py-20">
                <div class="donut"
                  data-peity='{ "fill": ["#7460ee", "#26c6da", "#fc4b6c"], "radius": 108, "innerRadius": 50  }'>
                  6,4,2</div>
              </div>

              <ul class="flexbox flex-justified text-center mt-70">
                <li class="br-1">
                  <div class="font-size-20 text-primary">65%</div>
                  <small class="font-size-12 text-fade">Computer</small>
                </li>

                <li class="br-1">
                  <div class="font-size-20 text-success">40%</div>
                  <small class="font-size-12 text-fade">Auto Mobile</small>
                </li>

                <li>
                  <div class="font-size-20 text-danger">20%</div>
                  <small class="font-size-12 text-fade">Management</small>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-xl-4 col-12">
          <div class="box box-inverse pull-up bg-facebook">
            <div class="box-header no-border">
              <span class="fa fa-facebook font-size-30"></span>
              <div class="box-tools pull-right">
                <h4 class="box-title">Facebook feed</h4>
              </div>
            </div>

            <blockquote class="blockquote blockquote-inverse no-border m-0 py-15">
              <p class="font-weight-300">Holisticly benchmark plug imperatives for multifunctional deliverables.</p>
              <div class="flexbox font-size-16 font-weight-300">
                <span class="text-fade"><small>21 November, 2018</small></span>
                <span><i class="fa fa-heart"></i> 75</span>
              </div>
            </blockquote>
          </div>

          <div class="box box-inverse box-carousel slide pull-up bg-twitter" data-ride="carousel">
            <div class="box-header no-border">
              <span class="fa fa-twitter font-size-30"></span>
              <div class="box-tools pull-right">
                <h4 class="box-title">Carousel feed</h4>
              </div>
            </div>

            <div class="carousel-inner">
              <blockquote class="blockquote blockquote-inverse no-border m-0 py-15 carousel-item active">
                <p class="font-weight-300">Holisticly benchmark plug imperatives for multifunctional deliverables.
                </p>
                <div class="flexbox font-size-16 font-weight-300">
                  <span class="text-fade"><small>21 November, 2018</small></span>
                  <span><i class="fa fa-heart"></i> 62</span>
                </div>
              </blockquote>

              <blockquote class="blockquote blockquote-inverse no-border m-0 py-15 carousel-item">
                <p class="font-weight-300">Holisticly benchmark plug imperatives for multifunctional deliverables.
                </p>
                <div class="flexbox font-size-16 font-weight-300">
                  <span class="text-fade"><small>21 November, 2018</small></span>
                  <span><i class="fa fa-heart"></i> 45</span>
                </div>
              </blockquote>

              <blockquote class="blockquote blockquote-inverse no-border m-0 py-15 carousel-item">
                <p class="font-weight-300">Holisticly benchmark plug imperatives for multifunctional deliverables.
                </p>
                <div class="flexbox font-size-16 font-weight-300">
                  <span class="text-fade"><small>21 November, 2018</small></span>
                  <span><i class="fa fa-heart"></i> 65</span>
                </div>
              </blockquote>
            </div>
          </div>
        </div> -->




      </div>

    </section>


  </div>
</body>


<script src="../../../assets/vendor_components/jquery/dist/jquery.js"></script>
<script src="../../../assets/vendor_components/jquery-ui/jquery-ui.js"></script>
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../../../assets/vendor_components/chart.js-master/Chart.min.js"></script>
<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
<script src="../../../assets/vendor_components/jquery.peity/jquery.peity.js"></script>
<script src="../../../assets/vendor_components/raphael/raphael.min.js"></script>
<script src="../../../assets/vendor_components/morris.js/morris.min.js"></script>
<script src="../../js/template.js"></script>
<script src="../../js/pages/dashboard.js"></script>
<script src="../../js/demo.js"></script>
<script src="../../../assets/vendor_components/jvectormap/lib2/jquery-jvectormap-2.0.2.min.js"></script>
<script src="../../../assets/vendor_components/jvectormap/lib2/jquery-jvectormap-world-mill-en.js"></script>
<script src="../../../assets/vendor_components/jvectormap/lib2/jquery-jvectormap-us-aea-en.js"></script>

<script>
  var iframe = window.parent.getIframeByElement(document.body);
  var iframeObj = $(iframe);
</script>